<template>
    <div>
        <el-form :model="form" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="form.mobile" placeholder="请输入手机号" clearable size="large" :prefix-icon="User" />
            </el-form-item>
            <el-form-item label="">
                <div style="display: flex; align-items: center;">
                    <el-input v-model="form.captcha" placeholder="请输入短信验证码" clearable size="large"
                        :prefix-icon="CircleCheck" />
                    <el-button type="primary" size="default" @click="getCode" style="margin-left: 10px;"
                        :disabled="second">发送<span v-if="second">{{ second
                        }}</span></el-button>
                </div>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" size="large" style="flex:1;width: 100%;" @click="submitForm">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import {
    sendMessage,
    loginByMobile
} from '@/api/login.js'
import { User, CircleCheck } from '@element-plus/icons-vue'
import { Encrypt } from '@/utils/aes.js'
let form = reactive({
    mobile: '',
    captcha: ''
})
let second = ref(0)

const getCode = async () => {
    let res = await sendMessage({
        mobile: Encrypt(form.mobile)
    })
    if (res.code != '200') return;
    second.value = 10
    const timer = setInterval(() => {
        if (second.value > 0) {
            second.value--
        } else {
            clearInterval(timer)
        }
    }, 1000)
}
const submitForm = async () => {
    let { mobile, captcha } = form
    const res = await loginByMobile({ mobile: Encrypt(mobile), captcha: Encrypt(captcha) })
    if (res.code != 200) {
        return
    }
    Localstorage.setItem('TOKEN', res.data);

}

</script>